{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" href="{{pluResPath}}dmg/damage.css">
{{/block}}

{{block 'main'}}
<div class="TopLeftPanel">
    <div class="UID">#队伍伤害UID: {{ uid }}</div>
    <div class="rank">
        {{ if rank.includes("ACE") }}
        <div class="title" style="color: rgba(249,0,0,1);">{{ rank }}</div>
        <div class="dps" style="color: rgb(255, 181, 181);">{{ dps }}</div>
        <div class="time" style="color: rgb(255, 181, 181);">{{ tm }}</div>
        <div class="total" style="color: rgb(255, 181, 181);">{{ total }}</div>
        {{ else if rank.includes("S") }}
        <div class="title" style="color: rgba(239,0,255,1);">{{ rank }}</div>
        <div class="dps" style="color: rgb(251, 195, 255);">{{ dps }}</div>
        <div class="time" style="color: rgb(251, 195, 255);">{{ tm }}</div>
        <div class="total" style="color: rgb(251, 195, 255);">{{ total }}</div>
        {{ else if rank.includes("A") }}
        <div class="title" style="color: rgb(10,227,169);">{{ rank }}</div>
        <div class="dps" style="color: rgb(172, 248, 201);">{{ dps }}</div>
        <div class="time" style="color: rgb(172, 248, 201);">{{ tm }}</div>
        <div class="total" style="color: rgb(172, 248, 201);">{{ total }}</div>
        {{ else if rank.includes("B") }}
        <div class="title" style="color: rgb(255,136,0);">{{ rank }}</div>
        <div class="dps" style="color: rgb(252, 218, 166);">{{ dps }}</div>
        <div class="time" style="color: rgb(252, 218, 166);">{{ tm }}</div>
        <div class="total" style="color: rgb(252, 218, 166);">{{ total }}</div>
        {{ else }}
        <div class="title" style="color: rgb(7, 126, 195);">{{ rank }}</div>
        <div class="dps" style="color: rgb(189, 218, 255);">{{ dps }}</div>
        <div class="time" style="color: rgb(189, 218, 255);">{{ tm }}</div>
        <div class="total" style="color: rgb(189, 218, 255);">{{ total }}</div>
        {{/if}}
    </div>
    <div id="pie"></div>
</div>
<div class="Avatars">
    {{ each avatars a }}
    <div class="avatar">
        <div class="char r{{ a.star }}" style="background-image: url({{_miao_path}}{{a.face}})"></div>
        <div class="char-con c{{ a.cons }}">C{{ a.cons }}</div>
        <div class="char-lvl">Lv.{{ a.level }}</div>
        <div class="weapon r{{ a.weapon.star }}"
             style="background-image: url({{_miao_path}}{{a.weapon.img}})"></div>
        <div class="weapon-aff a{{ a.weapon.affix }}">R{{ a.weapon.affix }}</div>
        <div class="weapon-lvl">Lv.{{ a.weapon.level }}</div>
        <div class="arti">
            {{ each a.artisDetail s }}
            <div class="arti s{{ s.img ? s.set : 0 }}" style="background-image: url({{_miao_path}}{{s.img}})"></div>
            {{/each}}
        </div>
        <div class="detail">
            <div class="cp">{{ a.cp }}%</div>
            <div class="cd">{{ a.cd }}%</div>
            <div class="prop">
                <div class="value">{{ a.key_value }}</div>
                <div class="name">{{ a.key_prop }}</div>
            </div>
            <div class="residue">
                <svg viewBox="0 0 25 25">
                    <circle cx="12.5" cy="12.5" r="10" stroke="#ccc" stroke-width="5" fill="none"/>
                    <circle id="{{ a.name }}" cx="12.5" cy="12.5" r="10" stroke="{{ a.color }}" stroke-width="5"
                            fill="none" stroke-dasharray="0, 62.8" stroke-dashoffset="0"
                            transform="rotate(-90 12.5 12.5)"/>
                    <text x="12.5" y="12.5" text-anchor="middle" dominant-baseline="middle" font-size="5"
                          font-weight="bold"
                          fill="{{ a.color }}" text-shadow="0 0 5px #9370DB">{{ a["recharge"]["pct"] }}
                    </text>
                </svg>
                <script>
                    document.getElementById("{{ a.name }}").setAttribute("stroke-dasharray", `${(50 + (parseInt("{{ a.recharge.pct }}".substring(0, "{{ a.recharge.pct }}".length - 1))) / 2) / 100 * (2 * Math.PI * 10)}, ${(2 * Math.PI * 10)}`);
                    document.getElementById("{{ a.name }}").setAttribute("stroke-dashoffset", `${(2 * Math.PI * 10) - (50 + (parseInt("{{ a.recharge.pct }}".substring(0, "{{ a.recharge.pct }}".length - 1))) / 2) / 100 * (2 * Math.PI * 10)}`);
                </script>
            </div>
            <div class="same">{{ a.recharge.same }}</div>
            <div class="diff">{{ a.recharge.diff }}</div>
            <div class="talent">
                {{ each a.talent t }}
                <div class="talent-icon" style="background-image: url({{_miao_path}}common/bg/talent-{{a.elem}}.webp)">
                    <div class="talent-icon-img" style="background-image: url({{_miao_path}}{{t.img}})"></div>
                    <strong class="{{ t.level > t.original ? 'extra' : '' }}">{{ t.level }}</strong>
                </div>
                {{/each}}
            </div>
        </div>
    </div>
    {{/each}}
</div>
<div class="Actions">
    <div class="title"></div>
    <div class="act">
        {{ each actions action }}
        <div>{{ action }}</div>
        {{/each}}
    </div>
</div>
<ul class="Buffs">
    <li class="title"></li>
    {{ each buffs item }}
    <li class="buff">
        <div>{{ item[0] }}</div>
        <div>{{ item[1] }}</div>
        <div>{{ item[2] }}</div>
    </li>
    {{/each}}
</ul>
{{ if detail }}
<ul class="Damages">
    <li class="title"></li>
    <li class="head">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </li>
    {{ each damages damage }}
    <li class="dmg">
        <div>{{ damage[0] }}</div>
        <div>{{ damage[1] }}</div>
        <div>{{ damage[2] }}</div>
        <div>{{ damage[3] }}</div>
        <div>{{ damage[4] }}</div>
    </li>
    {{/each}}
</ul>
{{/if}}
{{/block}}

{{block 'script'}}
<script type="text/javascript" src="{{pluResPath}}dmg/g2plot.min.js"></script>
<script>
    window.onload = function () {
        const container = document.getElementById('container');
        container.style.backgroundImage = `url({{ _miao_path }}common/bg/bg-{{ elem }}.webp)`;
    }
    const { Pie } = G2Plot;
    let color = `{{ pieColor }}`
    color = JSON.parse(color.replace(/&#34;/g, '"'));
    let data = `{{ pieData }}`
    data = JSON.parse(data.replace(/&#34;/g, '"'));
    const piePlot = new Pie("pie", {
        renderer: "svg",
        animation: false,
        data: data,
        padding: [ -10, 0, 20, 0 ],
        angleField: "damage",
        colorField: "char",
        radius: 0.8,
        color: color,
        label: {
            type: "inner",
            autoRotate: false,
            style: {
                textAlign: "center",
                fill: "#000",
                fontSize: 20,
                fontWeight: "bold",
                fontFamily: "PanelNumFont",
            },
            formatter: ({ char, damage, percent }) => {
                percent = (percent * 100).toFixed(0);
                return percent > 6 ? `${char}\n${damage}W` : "";
            },
        },
        legend: false,
    });
    piePlot.render();
</script>
{{/block}}